<template>
	<view class="page-bg">
		<view class="pad-left-right-48 pad-top-bottom-40 search-box">
			<view class="up-search radius48 centerY">
				<up-search @blur="hanldeSearch" @custom="hanldeSearch" v-model="waterMeterCode" height="86rpx"
					searchIconColor="#FFF" placeholder="输入水表编号" placeholderColor="#FFF" bgColor="transparent"
					shape="round" color="#FFF" :showAction="false"></up-search>
				<image @click="hanldeQrCode" class="code" src="/static/image/icon.png" mode=""></image>
			</view>
		</view>

		<view class="pad-left-right-24">
			<view v-if="info !=''" class="bg-white pad-left-right-24 pad-top-bottom-30 radius20 mar-top-20">
				<view class="title betweenX">
					<view>基本信息</view>
					<view @click="hanldeRefresh" class="font-28 color-text">刷新</view>
				</view>
				<view class="font-28 color-text mar-top-24">户主：{{info.holder_username}}</view>
				<view class="font-28 color-text mar-top-24">地址：{{info.address}}</view>
				<view class="font-28 color-text mar-top-16">上次抄表读数：{{info.water_number}}</view>
				<view class="font-28 color-text mar-top-16">上次抄表日期：{{info.last_bill_month}}</view>
				<view class="title betweenX mar-top-30"><view>收费规则</view></view>
				<view class="font-28 color-text mar-top-24">收费名称：{{info.charge_rule_name}}</view>
				<view class="font-28 color-text mar-top-24">收费价格：{{info.charge_rule_final_price}}元/m³</view>
				<view class="mar-top-16">
					<up-input :customStyle="{background:'#F7F8FA',border:'1rpx solid #D9D9D9'}" placeholder="输入此次读数"
						border="surround" type="number" v-model="newNumber"></up-input>
				</view>
			</view>
		</view>

		<view class="button-bottom">
			<view @click="hanldeSubmit" class="button-style">确认提交</view>
		</view>

		<up-loading-icon :show="isLoading" text="加载中..." textSize="18"></up-loading-icon>

		<!-- 提交二次确认框 -->
		<my-popup title="提示" content="请确定提交数据无误" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { waterDetail } from '@/api/index.js';
	import { waterMeterBillAdd } from '@/api/currency.js'
	import { onLoad } from '@dcloudio/uni-app';
	const isLoading = ref(false);

	// 水表编号
	const waterMeterCode = ref('');
	const isPopup = ref(false);
	const newNumber = ref("");

	// 打开扫码二维码
	const hanldeQrCode = () => {
		uni.scanCode({
			success: function(res) {
				// 正则表达式匹配查询字符串中的参数
				const regex = /[?&]([^=]+)=([^&]+)/g;
				let match;
				let params = {};

				// 循环匹配所有查询参数
				while ((match = regex.exec(res.result)) !== null) {
					params[match[1]] = match[2];
				}

				// 获取特定的参数值
				const waterMeterId = params['water_meter_id'];
				const waterCode = params['water_meter_code'];
				waterMeterCode.value = waterCode;
				getWaterDetail(waterCode);
			}
		});
	}

	// 搜索回调
	const hanldeSearch = (e) => {
		getWaterDetail(e);
	};

	onLoad((option) => {
		waterMeterCode.value = option.code;
		getWaterDetail(option.code);
	})

	// 查询水表详情
	const info = ref('');
	const getWaterDetail = (e) => {
		isLoading.value = true;
		waterDetail({ water_meter_code: e }).then(res => {
			if (res.code == 200) {
				info.value = res.data.info;
				isLoading.value = false;
			}
		})
	}

	// 刷新
	const hanldeRefresh = () => {
		getWaterDetail(waterMeterCode.value);
	}
	
	// 打开确认弹窗
	const hanldeSubmit = () => {
		if (waterMeterCode.value == '') {
			uni.$u.toast('请输入水表编号');
			return;
		}
		
		if (newNumber.value < 0 || newNumber.value == "") {
			uni.$u.toast('上报读数必须大于等于0');
			return
		}
		
		if (info.value == '') {
			uni.$u.toast('水表信息有误');
			return
		}	
		
		isPopup.value = true;
	}

	// 提交
	const hanldeConfirm = () => {
		waterMeterBillAdd({
			water_meter_id: info.value.id,
			water_meter_code: waterMeterCode.value,
			new_number: newNumber.value
		}).then(res => {
			if (res.code == 200) {
				setTimeout(() => {
					uni.$u.toast(res.msg);
				}, 1000)
				newNumber.value = '';
			}
			isPopup.value = false;
		})

	}
</script>

<style scoped lang="scss">
	.page-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/e00255645bcebf36cd7311f320854e7d.png');
		background-size: 100% 526rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		background-position: 0rpx -70rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.search-box {

		.up-search {
			border: 1rpx solid $uni-bg-color;
			background: rgba(255, 255, 255, .25);
		}

		.code {
			width: 43rpx;
			height: 40rpx;
			padding-right: 40rpx;
		}
	}

	.image-home {
		display: block;
		width: 88rpx;
		height: 88rpx;
	}

	.title {
		position: relative;
		padding-left: 30rpx;
	}

	.title::after {
		content: '';
		position: absolute;
		width: 7rpx;
		height: 26rpx;
		background: #0099DE;
		border-radius: 4rpx;
		left: 0rpx;
		top: 50%;
		margin-top: -13rpx;
	}

	.button-bottom {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		padding: 30rpx 48rpx;
		box-sizing: border-box;
		background-color: white;

		.button-style {
			padding: 20rpx 0;
			text-align: center;
		}
	}
</style>